<!DOCTYPE html>
<html id="root" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <base href=""/>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>科佳 | 问题反馈</title>
    <!--<link type="text/css" rel="stylesheet" href="./css/bootstrap.min.css"/>-->
    <link rel="stylesheet" href="./css/reset.css" type="text/css" media="screen" />
    <link type="text/css" rel="stylesheet" href="./css/style.css" media="screen"/>
    <link type="text/css" rel="stylesheet" href="./css/weui.min.css" media="screen"/>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type='text/javascript' src='./js/bootstrap.min.js'></script>
    <script type='text/javascript' src='./js/screen.js'></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/messageContent.js"></script>
</head>
<body >
<div id="loading-toast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p id="loadMessage" class="weui-toast__content">发送中</p>
    </div>
</div>
<div class="container">
    <div class="logo" style="padding-top: 0.4rem;margin: 0 auto 0rem;"></div>
    <div style="margin-bottom: 0.4rem;width: 100%;color: green;text-align: center;">售后热线：010-61943154</div>
    <form id="feedbackForm" class="register-form">
        <div>
            <img src="./images/person02.png" class="left" style="height: 22px;width: 22px;padding-top: 4px;"/>
            <div class="row-input" style="margin-left: 10%; background-color: #c9dfce;">
                <span type="text" id="feedbackUser" style="font-size: 18px;vertical-align: -webkit-baseline-middle;" th:text="${userName}"/>
            </div>
        </div>
        <div>
            <img class="left" src="./images/phone.png" style="height: 22px;width: 22px;padding-top: 4px;"/>
            <div class="row-input" style="margin-left: 10%;">
                <input type="text" id="mobile" name="phone" class="mobile" placeholder="您的手机号（11位）" maxlength="11" th:value="${mobile}"
                       onchange="clearInfo()" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" style="font-size: 18px;" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"/>
                <!--<span style="position: absolute;color: gray;font-size: 13px;">便于我们及时与您沟通。</span>-->
                <label id="mobileInfo" class="red" style="position: absolute;top: 10%;left: 52%;"></label>
            </div>
        </div>
        <div style="margin-top: 25px;">
            <img class="left" src="./images/message.png" style="height: 14px;width: 22px;"/>
            <!--<div class="row-textarea" style="margin-left: 12%;padding-top: 5px; padding-bottom: 5px">-->
            <div class="" style="margin-left: 10%;">
                <textarea id="message" rows="5" maxlength="100" placeholder="您的反馈（建议100字内）" style="width: 99%; font-size: 20px; border-color: #fff; box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance: none "></textarea>
                <!--<span style="position: absolute;color: gray;font-size: 13px;">便于我们及时了解您的需求。</span>-->
            </div>
        </div>
        <a id="send" class="submit" style="margin-left: 10%;width: 90%;" onclick="sendFeedback()">确定</a>
    </form>
</div>
</body>
<script>
    var isMobileError = false;
    function sendFeedback(){
        var mobile = $('#mobile').val();
        var message = $('#message').val();
        if(!mobile){
            alert("请输入您的手机号！");
            return false;
        }
        if(mobile.length != 11) {
            alert("请输入11位手机号！");
            return false;
        }
        if(!message){
            alert("请输入您的反馈信息！");
            return false;
        }
        if (isMobileError) {
            alert("请输入正确的手机号！");
            return false;
        }
        $('#loading-toast').fadeIn();
        $ajax('sendFeedback', {user: $('#feedbackUser').text(), phone: mobile, message: message}, getFeedbackResult);
    }
    function getFeedbackResult(data) {
        $('#loading-toast').fadeOut();
        isMobileError = false;
        if (data) {
            if (data.result == "Success") {
                window.location.href = "feedbackResult.html";
            } else if (data.result == "Error") {
                alert("服务异常，请稍后发送！");
            } else if (data.result == "Fail") {
                alert("发送失败，请重新发送！");
            } else if (data.result == "MobileError") {
                $('#mobileInfo').html("手机号有误");
                isMobileError = true;
            } else {
                alert("服务异常，请稍后发送！");
            }
        } else {
            alert("发送异常，请重新发送！");
        }
        $('#mobileInfo').html(data.mobileInfo);
    }
    function clearInfo(){
        $('#mobileInfo').empty();
    }
</script>
</html>